<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>${contractName}</title>
<script type="text/javascript" src="./Highstock-1.3.10/js/jquery.min.js"></script>
<link href="./css/glbootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript">
    	function onbtnclick(obj){
			//document.getElementById("alphaid").value=this.id;
			document.getElementById("ctDetailForm").action="../ContractDetail?alphaid="+obj.id;
			document.getElementById("ctDetailForm").submit();
			return true;
		}
    </script>
<script type="text/javascript">
var path = "./data/candlestick-and-volume.json";
var seriesOptions = [];
$(function() {
	$.getJSON(path, function(result) {
		var data = result.data;
		
		// split the data set into ohlc and volume
		var ohlc = [],
			volume = [],
			avg1 = [];
			avg2 = [];
			avg3 = [];
			avg4 = [];
			dataLength = data.length;
			
		for (i = 0; i < dataLength; i++) {
			ohlc.push([
				data[i][0], // the date
				data[i][1], // open
				data[i][2], // high
				data[i][3], // low
				data[i][4] // close
			]);
			
			volume.push([
				data[i][0], // the date
				data[i][5] // the volume
			]);
			
			avg1.push([
				data[i][0],
				data[i][6]
			]);
			
			avg2.push([
				data[i][0],
				data[i][7]
			]);
			avg3.push([
				data[i][0],
				data[i][8]
			]);
			avg4.push([
				data[i][0],
				data[i][9]
			]);
		}
		
		seriesOptions[0] = {
			name: "AVG5",
			data: avg1
		};
		seriesOptions[1] = {
			name: "AVG10",
			data: avg2
		};
		
		seriesOptions[2] = {
			name: "AVG20",
			data: avg3
		};
		seriesOptions[3] = {
			name: "AVG35",
			data: avg4
		};


		// set the allowed units for data grouping
		var groupingUnits = [[
			'week',                         // unit name
			[1]                             // allowed multiples
		], [
			'month',
			[1, 2, 3, 4, 6]
		]];

		// create the chart
		$('#container-kv').highcharts('StockChart', {
		    
		    rangeSelector: {
		        selected: 1
		    },

		    title: {
		        text: '${contractName}'
		    },

		    yAxis: [{
		        title: {
		            text: 'OHLC'
		        },
		        height: 200,
		        lineWidth: 2
		    }, {
		        title: {
		            text: 'Volume'
		        },
		        top: 300,
		        height: 100,
		        offset: 0,
		        lineWidth: 2
		    }],
		    
		    series: [{
		        type: 'candlestick',
		        name: 'AAPL',
		        data: ohlc,
		        dataGrouping: {
					units: groupingUnits
		        }
		    }, {
		        type: 'column',
		        name: 'Volume',
		        data: volume,
		        yAxis: 1,
		        dataGrouping: {
					units: groupingUnits
		        }
		    },seriesOptions[0],seriesOptions[1],seriesOptions[2],seriesOptions[3]
		    ] 
		});
	});
});
		</script>

<script type="text/javascript">
$(function() {
	var seriesOptions = [],
		yAxisOptions = [],
		seriesCounter = 0,
		names = ['POSITION', 'PRICE', 'CURRENCY'],
		colors = Highcharts.getOptions().colors;
	
	var path = "./data/";
	$.each(names, function(i, name) {
	
		$.getJSON(path+ name.toLowerCase() +'.json',	function(result) {
			var data = result.data;
			seriesOptions[i] = {
				name: name,
				data: data
			};

			// As we're loading the data asynchronously, we don't know what order it will arrive. So
			// we keep a counter and create the chart when all the data is loaded.
			seriesCounter++;

			if (seriesCounter == names.length) {
				createChart();
			}
		});
	});



	// create the chart when all data is loaded
	function createChart() {

		$('#container-result').highcharts('StockChart', {
		    chart: {
		    },

		    rangeSelector: {
		        selected: 4
		    },

		    yAxis: {
		    	labels: {
		    		formatter: function() {
		    			return (this.value > 0 ? '+' : '') + this.value + '%';
		    		}
		    	},
		    	plotLines: [{
		    		value: 0,
		    		width: 2,
		    		color: 'silver'
		    	}]
		    },
		    
		    plotOptions: {
		    	series: {
		    		compare: 'percent'
		    	}
		    },
		    
		    tooltip: {
		    	pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
		    	valueDecimals: 2
		    },
		    
		    series: seriesOptions
		});
	}

});
		</script>
</head>
<body>
	<script src="./Highstock-1.3.10/js/highstock.js"></script>
	<script src="./Highstock-1.3.10/js/modules/exporting.js"></script>
	<form id="ctDetailForm" action="../ContractDetail" method="post"
		class="form-horizontal" role="form">
		<p>
			ALPHAS:
			<c:forEach items="${alphaLst}" var="BtnAlpha" varStatus="status">
				<button class="${BtnAlpha.alphaClass}" id="${BtnAlpha.alphaId}"
					onClick="onbtnclick(this)">${BtnAlpha.alphaId}</button>
			</c:forEach>
		</p>
		<fieldset>
			<div class="panel panel-success">
				<!-- Default panel contents -->
				<div class="panel-heading">K-Volume-Chart</div>
				<div class="panel-body">
					<div id="container-kv" style="height: 500px; min-width: 600px"></div>
				</div>
			</div>
			<div class="panel panel-success">
				<!-- Default panel contents -->
				<div class="panel-heading">Result-Chart</div>
				<div class="panel-body">
					<div id="container-result" style="height: 500px; min-width: 600px"></div>
				</div>
			</div>
		</fieldset>
	</form>
</body>
</html>